<template>
  <!-- 注册页 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="账 号 注 册">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <div class="main">
      <p>请注册</p>
      <!-- 注册表单 -->
      <van-form>
        <van-field
          v-model="userRegiste.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
        />
        <van-field
          v-model="userRegiste.verifyCode"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :border="false"
          use-button-slot
        >
          <van-button
            slot="button"
            size="small"
            type="primary"
            @click="gainCode"
            :disabled="!isClick"
            >{{ time }}</van-button
          >
        </van-field>
        <van-field
          v-model="userRegiste.nickName"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
        />
        <van-field
          v-model="userRegiste.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
        />
        <van-field
          v-model="pwd2"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="密码"
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="register"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  name: "register",
  data() {
    return {
      time: "获取验证码",
      isClick: true, //验证码是否可点击
      pwd2: "", //确认二次密码
      userRegiste: {
        phone: "",
        nickName: "",
        verifyCode: "", //验证码
        password: "",
      },
    };
  },
  methods: {
    //确认注册点击
    register() {
      //先对表单进行验证

      for (let i in this.userRegiste) {
        if (this.userRegiste[i].trim() == "") {
          Toast("请完整填写表单");
          return;
        }
      }
      if (this.userRegiste.password !== this.pwd2) {
        Toast("两次密码不一致");
        return;
      }
      this.registerApi();
    },
    //用户注册接口
    registerApi() {
      console.log(this.userRegiste);
      this.$http.post("sys/user/register", this.userRegiste).then((res) => {
        console.log(res);
        if (res.data.code == 401) {
          let msg = res.data.message;
          Toast(msg);
        } else {
          Toast("注册成功");
          setTimeout(() => {
            this.$router.push({
              path: "./",
            });
          }, 1500);
        }
      });
    },
    //验证码按钮点击
    gainCode() {
      // console.log(this.userRegiste.phone);
      if (this.userRegiste.phone.trim() == "") {
        Toast("请先输入手机号");
      } else if (this.userRegiste.phone.length != 11) {
        Toast("请输入正确11位手机号");
      } else {
        this.isClick = false;
        let second = 180;
        this.time = second + "s";
        this.getCode();
        let timeID = setInterval(() => {
          second--;
          this.time = second + "s";
          if (second < 0) {
            this.time = "重新获取";
            this.isClick = true;
            clearInterval(timeID);
          }
        }, 1000);
      }
    },
    //获取验证码
    getCode() {
      this.$http
        .get("sms/sendSmsPhone/" + this.userRegiste.phone, {})
        .then(() => {
          Toast("验证码发送成功");
        });
    },
  },
};
</script>

<style lang='less' scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
body {
  margin: 0;
}
.main {
  padding: 0 20px;
  margin-top: 40px;
  p {
    padding-top: 30px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 50px;
  }
  .btns {
    margin: 150px auto;
    text-align: center;
  }
}
</style>